<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-icon">
        <text>←</text>
      </view>
      <view class="title">京东商城</view>
      <view class="more-icon">
        <text>⋮</text>
      </view>
    </view>
    
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input" @click="goToSearch">
        <text class="search-icon">🔍</text>
        <text class="search-placeholder">请输入关键词搜索</text>
      </view>
      <view class="search-btn">搜索</view>
    </view>
    
    <!-- 分类导航 -->
    <scroll-view class="nav-scroll" scroll-x>
      <view class="nav-list">
        <view class="nav-item active">推荐</view>
        <view class="nav-item">潮流爆款</view>
        <view class="nav-item">精品好货</view>
        <view class="nav-item">生鲜</view>
        <view class="nav-item">清洁用品</view>
        <view class="nav-item">三只松鼠</view>
      </view>
    </scroll-view>
    
    <!-- 分类图标 -->
    <view class="category-icons">
      <view class="category-item" v-for="(item, index) in categoryIcons" :key="index" @click="navigateTo(item.url)">
        <view class="category-icon" :style="{backgroundColor: item.bgColor}">
          <text>{{item.icon}}</text>
        </view>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>
    
    <!-- 超低折扣专区 -->
    <view class="discount-banner">
      <view class="discount-left">
        <view class="discount-title">超低折扣专区</view>
        <view class="discount-desc">全场低至5折起</view>
      </view>
      <view class="discount-right">GO</view>
    </view>
    
    <!-- 热卖品牌 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热卖品牌</text>
      </view>
      <view class="brand-list">
        <view class="brand-item">
          <view class="brand-image placeholder-box">
            <text>品牌图片</text>
          </view>
          <text class="brand-name">家乐</text>
        </view>
      </view>
    </view>
    
    <!-- 粮油调味 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">粮油调味</text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in foodProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 面部护肤 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">面部护肤</text>
        <text class="section-more">新客首单立减优惠 ></text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in skinProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 清洁纸品 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">清洁纸品</text>
        <text class="section-more">品质生活不能等 ></text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in paperProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 饮料牛奶 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">饮料牛奶</text>
        <text class="section-more">甄选好物等你来 ></text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in drinkProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 休闲食品 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">休闲食品</text>
        <text class="section-more">甄选零食好味道 ></text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in snackProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 厨房小电 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">厨房小电</text>
        <text class="section-more">品质生活好物 ></text>
      </view>
      <view class="product-row">
        <view class="product-card" v-for="(item, index) in kitchenProducts" :key="index" @click="navigateToDetail(item.id)">
          <view class="product-image placeholder-box">
            <text>{{item.name}}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryIcons: [
        { name: '饮品饮料', icon: '🍺', bgColor: '#FFF4E8', url: '/pages/category/category?id=1' },
        { name: '牛奶乳品', icon: '🥛', bgColor: '#E8F6FF', url: '/pages/category/category?id=2' },
        { name: '粮油食品', icon: '🍚', bgColor: '#FFF8E8', url: '/pages/category/category?id=3' },
        { name: '自热火锅', icon: '📔', bgColor: '#E8FFFA', url: '/pages/category/category?id=4' },
        { name: '美妆护肤', icon: '👝', bgColor: '#FFE8F6', url: '/pages/category/category?id=5' },
        { name: '纸品湿巾', icon: '🧻', bgColor: '#E8FFF4', url: '/pages/category/category?id=6' },
        { name: '休闲零食', icon: '🍭', bgColor: '#F4E8FF', url: '/pages/category/category?id=7' },
        { name: '厨房电器', icon: '🔌', bgColor: '#FFE8E8', url: '/pages/category/category?id=8' },
        { name: '居家日用', icon: '🏠', bgColor: '#E8FFFF', url: '/pages/category/category?id=9' },
        { name: '农副产品', icon: '🌽', bgColor: '#F0FFE8', url: '/pages/category/category?id=10' }
      ],
      foodProducts: [
        { id: 1, name: '自然原香粉2号 50g 平滑细腻', price: '72.60' },
        { id: 2, name: '拉面调味 1454g 秘制', price: '42.46' },
        { id: 3, name: '高鲜小酱料2号 100g JSX', price: '46.20' }
      ],
      skinProducts: [
        { id: 4, name: 'ANESSA安热沙 防晒霜', price: '207.90' },
        { id: 5, name: 'ANESSA安热沙 隔离防晒乳', price: '165.30' },
        { id: 6, name: '安热沙金瓶防护霜60ml', price: '207.90' }
      ],
      paperProducts: [
        { id: 7, name: '心相印DT551 100抽*2层', price: '254.40' },
        { id: 8, name: '维达抽纸 整箱150抽', price: '66.67' },
        { id: 9, name: '清风卷纸巾 整箱', price: '80.56' }
      ],
      drinkProducts: [
        { id: 10, name: '外星人电解质水无糖饮料', price: '95.50' },
        { id: 11, name: '伊利安慕希A2纯牛奶', price: '62.10' },
        { id: 12, name: '伊利安慕希A纯牛奶', price: '80.97' }
      ],
      snackProducts: [
        { id: 13, name: '德州扒鸡香辣味整只', price: '152.90' },
        { id: 14, name: '盒上海特产绿豆糕', price: '35.10' },
        { id: 15, name: '德州扒鸡原味500g', price: '55.89' }
      ],
      kitchenProducts: [
        { id: 16, name: '苏泊尔养生壶0.8L 玻璃', price: '427.90' },
        { id: 17, name: '苏泊尔养生壶1.5L 玻璃', price: '196.90' },
        { id: 18, name: '苏泊尔养生壶2L 玻璃', price: '350.90' }
      ]
    }
  },
  onLoad() {
    console.log('首页加载')
    // 获取购物车数量
    this.$store.dispatch('getCartCount')
  },
  onPullDownRefresh() {
    // 下拉刷新
    console.log('下拉刷新')
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom() {
    // 上拉加载更多
    console.log('上拉加载更多')
  },
  methods: {
    goToSearch() {
      // 跳转到搜索页面
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`
      })
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 20rpx;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #e93b3d;
  color: #fff;
}

.back-icon, .more-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

/* 搜索栏 */
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #e93b3d;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #fff;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.search-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
  color: #999;
}

.search-placeholder {
  font-size: 28rpx;
  color: #999;
}

.search-btn {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
}

/* 分类导航 */
.nav-scroll {
  white-space: nowrap;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-list {
  display: flex;
  padding: 0 20rpx;
}

.nav-item {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  position: relative;
}

.nav-item.active {
  color: #e93b3d;
  font-weight: bold;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #e93b3d;
}

/* 分类图标 */
.category-icons {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.category-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
}

/* 超低折扣专区 */
.discount-banner {
  margin: 0 20rpx 20rpx;
  height: 100rpx;
  background: linear-gradient(to right, #FFE8B8, #FFCC66);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
  position: relative;
  overflow: hidden;
}

.discount-banner::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100rpx;
  height: 100rpx;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.2)"/></svg>');
  background-size: contain;
}

.discount-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e93b3d;
}

.discount-desc {
  font-size: 24rpx;
  color: #e93b3d;
  margin-top: 6rpx;
}

.discount-right {
  width: 60rpx;
  height: 60rpx;
  background-color: #e93b3d;
  color: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
}

/* 商品区块 */
.section {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6rpx;
  width: 8rpx;
  height: 32rpx;
  background-color: #e93b3d;
}

.section-more {
  font-size: 24rpx;
  color: #999;
}

/* 品牌列表 */
.brand-list {
  display: flex;
  justify-content: space-between;
}

.brand-item {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-image {
  width: 100%;
  height: 200rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.brand-name {
  font-size: 28rpx;
  color: #333;
}

/* 商品行 */
.product-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.product-card {
  width: 33.33%;
  padding: 0 10rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}

.product-image {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.product-info {
  padding: 10rpx 0;
}

.product-name {
  font-size: 24rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 67.2rpx;
}

.product-price {
  font-size: 28rpx;
  color: #e93b3d;
  font-weight: bold;
  margin-top: 10rpx;
}
</style> 